<template>
    <div>
      <!-- 选择 -->
      <div class="image-list">
        <div class="img-box">
          <div class="item" v-for="(item, index) in fileList" :key="index">
            <el-image
              :src="getImageUrl(item)"
              class="img"
              :preview-src-list="[item]"
              fit="contain"
            />
            <div class="operate">
              <div class="rank">
                <el-icon color="#fff"><Rank /></el-icon>
              </div>
              <div class="delete" @click.stop="handleDelete(index)">
                <el-icon color="#fff"><Delete /></el-icon>
              </div>
            </div>
          </div>
        </div>
  
        <div class="image-select-box">
          <div
            class="image-select-item"
            v-if="limit > fileList.length"
            @click="openPicker"
          >
            <el-icon><Plus /></el-icon>
          </div>
        </div>
      </div>
  
      <!-- 图库 -->
      <picker
        ref="pickerRef"
        @confirm="pickerConfirm"
        :limit="limit"
      ></picker>
    </div>
  </template>
  <script>
  import { reactive, ref, watch } from "vue";
  import picker from "./picker.vue";
  import appStore from '@/app/admin/store/app'
  export default {
    name:'22',
    props:{
        modelValue:{
      type:[ Array, String],
      default(){
        return '';
      }
      
    },
  
    // 限制数量
    limit: {
      type: [Number, String],
      default() {
        return 1;
      },
    },
    } ,
  
  emits: ['change', 'update:modelValue'],
  setup(props, { emit }) {
    const pickerRef = ref([]);
  
  // 图片
  const fileList = ref([]);
  // 拷贝（）
  const modelValueCopy = ref(props.modelValue);
  watch(
    modelValueCopy,
    (val) => {
      console.log(99, val,props.modelValue);
      let arr = Array.isArray(val)
        ? val
        : val == "" || val == undefined
        ? []
        : [val];
        arr.forEach(function(item,index){
          arr[index] = item.replace(appStore.state.config.oss_domain,'')
        })
        fileList.value = arr
      
    },
    {
      deep:true,
      immediate: true,
    }
  );
  
  
  
  /**
   * 获取图片完整地址
   * @param {*} uri 
   */
  const getImageUrl =  (uri)=>{
    let oss_domain = appStore.state.config.oss_domain
  
    return uri ? `${oss_domain}${uri}` : '';
  }
  
  const openPicker = () => {
    pickerRef.value.open();
  };
  
  const pickerConfirm = (value) => {
    value.forEach((element) => {
      fileList.value.push(element.uri);
    });
   
    if (props.limit == 1) {
  
      emit("update:modelValue", fileList.value[0]);
  
    } else {
      
      emit("update:modelValue", fileList);
    }
  };
  
  // 删除
  const handleDelete = (index) => {
    fileList.value.splice(index, 1);
  };
  return {
          
            fileList,
            getImageUrl
        }
  }
  }
 
  </script>
  <style lang="scss" scoped>
  .image-list {
    display: flex;
    .image-select-box {
      display: flex;
  
      .image-select-item {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 1px var(--el-border-color) dashed;
        width: 80px;
        height: 80px;
        border-radius: 8px;
      }
    }
  
    .img-box {
      display: flex;
      .item {
        height: 80px;
        width: 80px;
        overflow: hidden;
        position: relative;
        background: var(--el-fill-color-light);
        .img {
          width: 80px;
          height: 80px;
          object-fit: cover;
          border-radius: 8px;
          display: inline-block;
        }
        &:nth-of-type(n) {
          margin-right: 15px;
        }
        &:hover {
          .operate {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 80px;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 10px;
            height: 30px;
            border-radius: 0 0 8px 8px;
          }
        }
        .operate {
          width: 80px;
          background: rgba(0, 0, 0, 0.5);
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 10px;
          height: 30px;
          border-radius: 0 0 8px 8px;
        }
      }
    }
  }
  </style>
    
    